<!--
 * @Author: wang_sheshe
 * @Date: 2021-05-17 15:04:17
 * @LastEditTime: 2021-07-26 16:10:44
 * @Description: 巡视移动作业任务执行操作页面
-->
<template>
	<article class="bg_4dbfae excuse">
		<van-nav-bar title="巡视任务执行" left-text="" left-arrow @click-left="back" fixed>
			<!-- <template slot="right">
				<div class="parent-circle">
					<div class="child-circle"></div>
				</div>
            </template> -->
		</van-nav-bar>
		
		<!-- 头组件 -->
        <van-row class="bg_4dbfae header" type="flex" justify='space-around'>
            <van-col span="18">
                <van-search v-model.trim="deviceName" clearable @input="focus" shape="round" background="#F5F6FA" placeholder="请输入设备"></van-search>
			</van-col>
            <van-col span="3" class="center_center" style='margin-left: -2%;'>
				<div class="radis-border">
					<van-image class="imgSize" width="24" height="24" @click="rfidBtn" :src="icon.rfid" />
				</div>
            </van-col>
			<van-col span="3" class="center_center" style='margin-right: 2%;'>
				<div class="radis-border">
					<van-image class="imgSize" width="24" height="24" @click="showScreenPage" :src="icon.scan" />
				</div>
            </van-col>
        </van-row>
		
		<div class="doc-wrapper">
			<van-row class="font18 daiban" style="padding: 15px 15px;color: #333;">
				<div style="width: 50%;"><span class="line_green"></span> 巡视设备列表</div>
			</van-row>
			<van-collapse v-model="activeNames" style="height:100%;overflow-y: auto;">
                <van-collapse-item v-for="(deviList,index) in showDeviceList" :key="index" :title="deviList.bayName" :name="deviList.bayId" value-class="red">
                    <ul>
                        <li v-for="(device,i) in deviList.deviceList" :key="i" class="dev-item">
                            <span>{{device.deviceName}}</span>
                            <span>
								<van-button size="mini" type="info" @click="showMenu(device)" >操作</van-button>
							</span>
                        </li>
                    </ul>
                </van-collapse-item>
            </van-collapse>
		</div>
		<!-- 底部导航菜单 -->
		<div class="bottomAbsolute">
			<van-grid :column-num="3" style="width: 100%;">
				<van-grid-item v-for="(value,index) in tabbar" :key="index" @click="gradeItemClickNav(value,index)">
				   <van-image v-if="index != 2" :src="value.active" width="25" height="25"/>
				   <van-icon v-if="index == 2" name="bars" size="35"/>
				   <span v-text="value.name" style="margin-top: 5px;" class="font14"></span>
				</van-grid-item>
			</van-grid>
		</div>
		<!--  更多 -->
		<van-popup round style="width:100%;" v-model="showMore" position="bottom" @close="showMore=false">
			<template>
				<van-nav-bar title="更多" right-text="关闭" :border="true" @click-right="showMore=false"/>
				<van-checkbox-group>
					<van-cell v-for="(item,index) in actions" @click="toPage(item)" :title="item.text" style="text-align: center;" clickable :key="index">
					</van-cell>
				</van-checkbox-group>
			</template>
		</van-popup>

        <!-- pop 弹框跳转-->
		<van-popup round v-model="showPicker" position="bottom" @close="showPicker=false">
			<template>
				<van-grid :column-num="4">
                    <van-grid-item v-for="(value,index) in gridData" :key="index" @click="gradeItemClick(value)">
                       <van-image :src="value.src" width="44" height="44"/>
                       <span v-text="value.text" class="font14"></span>
                    </van-grid-item>
				</van-grid>
				<div><span class="closeSpan"><van-icon name="cross" /></span> </div>
			</template>
		</van-popup>
		<!-- pop end -->
	</article>
</template>

<script type="text/javascript">
	import { Tabbar, TabbarItem ,Tag , Grid, GridItem,Popover } from 'vant';
	import Util from "@/utils/util"
	export default {
		name: 'DefectManage',
		components: {
			[Tabbar.name]: Tabbar,
            [TabbarItem.name]: TabbarItem
		},
		data() {
			return {
                deviceName:"",
                activeNames:[],
                showPicker:false,
                gridData:[{"text":"抄录数据","src":require("../../../../assets/img/mainIndex/chaolu.png"),"path":"/copyData"},
                {"text":"作业卡","src":require("../../../../assets/img/mainIndex/weihu.png"),"path":"/workCard"},
                {"text":"登记缺陷","src":require("../../../../assets/img/mainIndex/quexian.png"),"path":"/AddDefect"},
                {"text":"登记隐患","src":require("../../../../assets/img/mainIndex/yinhuan.png"),"path":"/AddHiddenDanger"},
                {"text":"台账查询","src":require("../../../../assets/img/mainIndex/quexian.png"),"path":"/deviceTab"},
				{"text":"履历查询","src":require("../../../../assets/img/mainIndex/yinhuan.png"),"path":"/luli"}],
				showMore: false,//更多弹框 开关
				// 通过 actions 属性来定义菜单选项
				actions: [
					{ text: '批量抄录', id: '1',path:"/batchCopy" }, 
					{ text: '查看站内缺陷', id: '2',path:"/DefectList"  }, 
					{ text: '压板对照表' , id: '3',path:"" }
				],
				active: 0,//导航
                tabbar: [
					{
						name: '设备维护',
						path: '/addProtect',
						pathName: 'home',
						icon: 'compass-full',
						active: require('../../../../assets/img/mainIndex/daohang.png'),
					},
					{
						name: '结束巡视',
						path: '/items',
						pathName: 'pictureFileResource',
						active: require('../../../../assets/img/mainIndex/finish.png'),
					},
					{
						name: '更多',
						path: '/checkrepair',
						pathName: 'checkRepair',
						active: require('../../../../assets/img/mainIndex/morePage.png'),
					}
           		],
				icon: {
					rfid:require('../../../../assets/img/mainIndex/rfid.png'),
					scan: require('../../../../assets/img/mainIndex/scan.png')
				},
				taskInfo: {},//任务数据
				seldeviceList:[],//设备列表
				showDeviceList: [],//展示的设备列表
				userInfo: {},
				deviceInfo: "",//当前设备信息
			}
		},
		methods: {
			//底部 增加选中样式
			changeActive({ name }) {
				this.setActive(name);
			},
			//设置选中颜色
			setActive(name) {
				this.tabbar.forEach((tab, i) => {
					if (tab.pathName == name) {
						this.active = i;
						return false;
					}
				});
			},
			//设备搜索事件
            focus(){
				var screnList = [];
				if(!this.deviceName) {
					this.showDeviceList = JSON.parse(JSON.stringify(this.seldeviceList));
					return;
				}
				this.seldeviceList.map(devi => {
					var bool = devi.deviceList.filter(item => {
									return item.deviceName.indexOf(this.deviceName) != -1
								})
					if(bool.length > 0) {
						screnList.push({
							deviceList:	bool,
							bayId: devi.bayId,
							bayName: devi.bayName
						})
					}
				}) 
				this.showDeviceList = screnList;
			},
			
			/**
			* @description: 结束巡视任务
			*/
			finishedTask(){
				this.$Dialog.confirm({
					title: "标题",
					message: "是否确认结束本次巡视!",
				}).then(() => {
					this.$router.push({
						name: 'finish',
						params: {
							taskInfo: this.taskInfo,
						}
					})
				}).catch((err) => {
					console.log("取消结束巡视按钮")
				})
			},
			/**
			 * 返回
			 */
			back(){
				this.$router.push({
					name:"tourTaskIndex",
					params: {
					}
				})
			},
			showMenu(device) {
				this.deviceInfo = device;//当前设备id
				this.showPicker=true
			},
			/**
			* @description: 操作跳转
			* @param {*} value
			* @return {*}
			*/
			gradeItemClick(value){
				if(value.text == "作业卡") {
					console.log(this.deviceInfo,this.taskInfo.patrolTypeName)
					this.$router.push({
						path: value.path,
						query: {
							deviceId: this.deviceInfo.deviceId,
							patrolTypeName:this.taskInfo.patrolTypeName,
							deviceInfo:this.deviceInfo,
							taskInfo: this.taskInfo,
						}
					})
				}else if(value.text == "履历查询" || value.text == "台账查询" || value.text == "抄录数据"
						|| value.text == "登记隐患"){
					this.$router.push({
						path: value.path,
						query: {
							taskInfo: this.taskInfo,
							deviceInfo:this.deviceInfo
						}
					})
				}else if(value.text == "登记缺陷"){
					console.log("this.taskInfo.substationId",this.taskInfo.substationId)
					this.$router.push({
						path: value.path,
						query: {
							params: {
								taskInfo:this.taskInfo,
								subId:this.taskInfo.substationId,
								subName:this.taskInfo.substationName,
								deviceInfo:this.deviceInfo
							}
						}
					})
				}else{
					this.$router.push({
						path: value.path,
						query: {
							taskInfo: this.taskInfo
						}
					})
				}
			},
			/**
			* @description: 底部导航栏跳转
			* @return {*}
			*/
			gradeItemClickNav(item,index){
				if(index==0){
					this.$router.push({
						path: '/addProtect',
						query: {
							title: '结束巡视任务'
						}
					})
				}else if(index==1){
					this.finishedTask();
				}else{
					this.showMore=!this.showMore;
				}
			},
			/**
			* @description: rfid
			*/
			rfidBtn() {

			},
			/**
			* @description: 扫一扫
			*/
			showScreenPage(){

			},
			/**
			* @description: 更多按钮跳转
			* @param {*} path  跳转路径
			* @return {*}
			*/
			toPage(obj) {
				if(!obj.path) {
					this.$Toast("待开发敬请期待！")
					return;
				}
				console.log("deviceType==",this.seldeviceList)
				if(obj.path == "/batchCopy") {//抄录
					this.$router.push({
						path: obj.path,
						query: {
							taskInfo: this.taskInfo,
							deviceType: this.seldeviceList
						}
					})
				}else{
					this.$router.push({
						path: obj.path,
						query: {
							taskInfo: this.taskInfo
						}
					})
				}
			},
			/**
			* @description: 处理设备格式(将相同的间隔设备归纳一起) 间隔-设备
			*/
			dealDevice(taskInfo) {
				this.seldeviceList = [];
				if(taskInfo.deviceList && taskInfo.deviceList.length > 0) {
					var obj = [];
					for(var i in taskInfo.deviceList) {
						if(obj.indexOf(taskInfo.deviceList[i].bayId) === -1) {
							this.seldeviceList.push({
								bayName: taskInfo.deviceList[i].bayName,
								bayId: taskInfo.deviceList[i].bayId,
								deviceList:[taskInfo.deviceList[i]]
							})
							obj.push(taskInfo.deviceList[i].bayId);
						}else{
							for(var j in this.seldeviceList) {
								if(this.seldeviceList[j].bayId == taskInfo.deviceList[i].bayId) {
									this.seldeviceList[j].deviceList.push(taskInfo.deviceList[i]);
									break;
								}
							}
						}
					}
				}
				console.log("this.seldeviceList",this.seldeviceList)
				this.showDeviceList = JSON.parse(JSON.stringify(this.seldeviceList))
			}
		},

		mounted() {
			var userInfo = localStorage.getItem("userInfo");
			this.userInfo = JSON.parse(userInfo);
			this.taskInfo = this.$route.params.taskInfo;//任务详情
			console.log("taskInfo",this.taskInfo)
			this.dealDevice(this.taskInfo);
		},
		
		created() {
			
		},
	}
</script>

<style scoped>
	article {
		display: flex;
		flex-direction: column;
		height: 100vh;
		background-color: #FAFAFA;
	}
	.bg_4dbfae{
		background: #f5f6fa !important;
	}
	.center_center{
        display:flex;
        justify-content:center;
        align-items:center;
    }
	.header{
		margin-top: 45px;
	}
	.header .van-cell {
		font-size: 0.3rem;
		justify-content: center;
		align-items: center;
    }
	.van-search__content--round {
      background: white !important;
	  color: #E6E6E6 !important;
    }
	.tc-keyword-wrapper {
		margin: 5px 0;
	}
	
	.defectList-wrapper {
		flex: 1 1 0%;
		overflow-y: scroll;
		background: white;
	}
	.van-tabbar--fixed {
		position: fixed;
		top: 62px;
		left: 0;
		background: #f5f6fa !important;
    }
	.dot {
		display: inline-block;
		height: 4px;
		width: 4px;
		border-radius: 50%;
		background-color: #CCCCCC;
	}
	.doc-wrapper{
		height: calc(100% - 260px);
		margin: 0.2rem 0.26667rem 0 0.4rem;
		background: white;
		border-radius: 10px;
	}
	.van-button--primary {
		background-color: #17B49B;
		border: 0.02667rem solid #17B49B;
		width: 3rem;
		height: 0.6rem;
    }
	.flex-c{
		position: relative;
		top: 0.05rem;
		text-align: right;
		padding-right: 0.3rem;
	}
	.radis-border{
		height: 40px;
		width: 40px;
		border-radius: 50%;
		background: white;
		text-align: center;
		padding-top: 8px;
        box-sizing: border-box;
	}
	.van-tabbar-item__icon img {
		display: block;
		height: 1rem;
		margin-bottom: 5px;
    }
	[class*=van-hairline]::after{
		border: none !important;
    }
    .dev-item{
        display: flex;
        justify-content: space-between;
        padding: 0 0px 0 15px;
		margin: 5px 0px;
		align-items: center;
    }
	.closeSpan{
		display: block;
		height: 30px;
		width: 30px;
		border-radius: 50%;
		background-color: rgb(239, 239, 239);
		margin: 0 auto;
		margin-top: 15px;
		margin-bottom: 15px;
	}
	.bottomAbsolute{
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: justify;
		-ms-flex-pack: justify;
		justify-content: space-between;
		position: absolute;
		bottom: 0px;
		left: 0;
		width: 100%;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}
	.van-button--info {
     width: 65px;
	}
	.line_green{
		display: inline-block;
		height: 16px;
		width: 3px;
		background: #17B49B;
		border-radius: 3px;
		position: relative;
		top: 3px;
	}
	.van-popover{
		width: 250px;
		text-align: center;
	}
	.excuse /deep/ .red{
		color: red !important;
	}
	/deep/ .van-nav-bar__text{
		font-size: 14px !important;
	}
</style>